<template>
  <h3>学生MBTI人格信息表</h3>
  <el-card>
    <el-row class="search">
      <el-col :span="8">
        <el-input class="input" v-model="queryParam.Sname" placeholder="输入姓名查找"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button class="search-but" @click="getdata" type="info" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button class="search-but" @click="gotoTestResultPage" type="info">显示查询结果</el-button>
      </el-col>
    </el-row>
    <el-dialog title="新增学生" v-model="addDialogOpen" width="45%" :before-close="handleClose">
      <el-form :model="addStudentInfo" :rules="Student" ref="addStudentRef">
        <el-form-item label="学号" prop="Sno">
          <el-input v-model="addStudentInfo.Sno"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="addStudentInfo.Sname"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="Sdept">
          <el-input v-model="addStudentInfo.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="Smajor">
          <el-input v-model="addStudentInfo.Smajor"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="Sclass">
          <el-input v-model="addStudentInfo.Sclass"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="addStudentCancel">取 消</el-button>
					<el-button type="primary" @click="addStudentSave">确 定</el-button>
				</span>
      </template>
    </el-dialog>
    <el-dialog title="修改学生信息" v-model="changeDialogOpen" width="45%" :before-close="handleClose">
      <el-form :model="StudentInfo" :rules="Student" ref="changeStudentRef">
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="StudentInfo.Sname"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="Sdept">
          <el-input v-model="StudentInfo.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="Smajor">
          <el-input v-model="StudentInfo.Smajor"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="Sclass">
          <el-input v-model="StudentInfo.Sclass"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="changeStudentInfoCancel">取 消</el-button>
					<el-button type="primary" @click="changeStudentInfoSave">确 定</el-button>
				</span>
      </template>
    </el-dialog>
  </el-card>
  <el-table class="student-table" :data="tableData" border stripe :header-cell-style="tableHeaderColor">
    <el-table-column prop="change" label="操作" width="180" class="operation-cell">
      <template #default="scope">
        <el-button type="success" icon="el-icon-plus" mini circle @click="addStudentInfoClick"></el-button>
        <el-button type="primary" icon="el-icon-edit" circle mini @click="changeStudentInfo(scope.row)"></el-button>
<!--        <el-button type="danger" icon="el-icon-delete" circle mini disabled></el-button>-->
      </template>
    </el-table-column>
    <el-table-column v-for="item in itemOptions" :key="item.id" :label="item.title" :prop="item.key" width="140px">
    </el-table-column>
  </el-table>
</template>
<script>
import axios from "axios"
import router from "@/router";
export default {
  data() {
    return {
      itemOptions: [{id:1,key:"TestAnswer.Tas_id",title:"编号"},
        {id:2, key:"Sno", title: "学号"},
        {id:3, key:"Sname", title: "姓名"},
        {id:4, key:"Sdept", title: "学院"},
        {id:5, key:"Smajor", title: "专业"},
        {id:6, key:"Sclass", title: "班级"},
        {id:7, key:"FormatTime", title: "答题时间"},
        {id:8, key:"TestAnswer.Result", title: "测试结果"}],
      tableData: [],
      queryParam: {
        Sname: "",
      },
      addDialogOpen: false,
      changeDialogOpen: false,
      StudentInfo: {
        Sno: "",
        Sname: "",
        Sdept: "",
        Smajor: "",
        Sclass: "",
        time: "",
        result: ""
      },
      addStudentInfo: {
        Sno: "",
        Sname: "",
        Sdept: "",
        Smajor: "",
        Sclass: "",
        time: "",
        result: ""
      },
      Student: {},
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    tableHeaderColor({rowIndex}) {
      if (rowIndex === 0) {
        return 'background-color:#dedede; color:black; font-weight:500';
      }
    },
    async getdata() {
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
      let data = {
        Sname: this.queryParam.Sname
      };
      axios.get('http://localhost:8080/MBTI-backend/getStudent?Sname='+this.queryParam.Sname, data, config).then(res => {
        this.tableData = res.data.data.value;
      }).catch(error => {
            console.log(JSON.stringify(error))
      });
    },

    gotoTestResultPage() {
      router.push('/showTestResult')
    },

    addStudentCancel() {
      this.$refs.addStudentRef.resetFields();
      this.addDialogOpen = false;
    },

    async addStudentSave() {
      this.$refs.addStudentRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请重新输入')
        let config = {
          headers: {
            'Content-Type': "application/json, charset=UTF-8"
          }
        };
        let data = {
          Sno: this.addStudentInfo.Sno,
          Sname: this.addStudentInfo.Sname,
          Sdept: this.addStudentInfo.Sdept,
          Sclass: this.addStudentInfo.Sclass,
          Smajor: this.addStudentInfo.Smajor
        };
        await axios.post('http://localhost:8080/MBTI-backend/addStudent', data, config).then(res => {
          console.log(res);
          if(!!res && !!res.data){
            this.addDialogOpen = false;
            if(res.data.code == -1){
              this.$message.error('新增学生信息失败！学号不能重复');
              this.$refs.addStudentRef.resetFields();
            } else {
              this.getdata()
              this.$message.success('新增学生信息成功！')
            }
          }
          this.addStudentInfo= {
            Sno: "",
            Sname: "",
            Sdept: "",
            Smajor: "",
            Sclass: "",
            time: "",
            result: ""
          };
        }).catch(error => {
          console.error(JSON.stringify(error))
          this.$message.error('新增学生信息失败！')
          this.addDialogOpen = false;
          this.addStudentInfo= {
            Sno: "",
            Sname: "",
            Sdept: "",
            Smajor: "",
            Sclass: "",
            time: "",
            result: ""
          };
        });
      })
    },

    addStudentInfoClick(){
      this.addDialogOpen = true;
    },

    changeStudentInfo(row) {
      this.changeDialogOpen = true
      this.StudentInfo = row
      this.StudentInfo.Sno = row.Sno
    },

    changeStudentInfoCancel() {
      this.changeDialogOpen = false;
      this.$refs.changeStudentRef.resetFields();
    },

    changeStudentInfoSave() {
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
      let data = {
        Sno: this.StudentInfo.Sno,
        Sname: this.StudentInfo.Sname,
        Sdept: this.StudentInfo.Sdept,
        Sclass: this.StudentInfo.Sclass,
        Smajor: this.StudentInfo.Smajor
      };
      axios.post('http://localhost:8080/MBTI-backend/updateStudent', data, config).then(() => {
        this.changeDialogOpen = false;
        this.getdata()
      }).catch(error => {
        this.$message.error('修改学生信息失败')
        console.error(JSON.stringify(error))
        this.changeDialogOpen = false;
        this.$refs.changeStudentRef.resetFields();
      });
      this.$message.success('修改学生信息成功')
      this.changeDialogOpen = false;
    }
  },
};
</script>

<style scoped>
.student-table {
  height: auto;
  padding-left: 60px;
  padding-bottom: 30px;
}
.input{
  margin-left: 400px;
}
.search-but{
  margin-left: 500px;
}
</style>
